//导入路径的信息
const path = require("path");

//导入清除插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// 引入生成html页面的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入独立生成css文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 引入处理vue文件的插件
const { VueLoaderPlugin } = require('vue-loader')

//打包压缩的内容
// const uglify = require('uglifyjs-webpack-plugin');

//压缩js文件的内容
const TerserPlugin = require('terser-webpack-plugin')
// css压缩
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

const ComepressionPlugin = require("compression-webpack-plugin");
//配置核心信息
module.exports = {
    //入口文件
    entry: "./src/main.js",
    //出口文件
    output: {
        //打包后生成的文件
        filename: "js/[name].js",
        path: path.resolve(__dirname, 'dist'),//打包后要生成的目录
    },
    // 配置路径的别名信息
    resolve: {
        alias: {
            '@': path.resolve(__dirname, "src"),
        }
    },
    //开发服务的配置
    devServer: {
        port: 8000,
        open: true,
        proxy: {

        }
    },
    // loader加载器
    module: {
        rules: [
            //处理css文件
            {
                // 指定文件的格式
                test: /\.css$/i,
                // 从右到左依次执行，先写css-loader，再写style-loader, 从下到上执行
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: "css-loader" }
                ]
            },

            // 处理图片文件
            {
                test: /\.(png|jpe?g|gif)$/i,
                type: 'javascript/auto',
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[hash:7].[ext]',
                            outputPath: 'images'
                        }
                    },
                    // {
                    //     // 指定具体的loader
                    //     loader: 'url-loader',
                    //     // 配置该loader的选项
                    //     options: {
                    //         // 指定打包后文件的名称
                    //         // 文件名([原文件名]_[随机返回hash值].[原扩展名])
                    //         // [name]表示采用文件原来的名称，[ext]表示采用文件原来扩展名，[hash:8]表示返回8位的哈希值
                    //         name: 'images/[name]_[hash:8].[ext]',
                    //         // 超过指定大小的图片参与打包。否则直接转为base64编码：单位是字节
                    //         limit: 1024 * 5,   // 超过10kb大小的图片参与打包
                    //         // 关闭es6的模块化，统一采用commonjs模块化
                    //         esModule: false
                    //     }
                    // }, 
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            // 压缩 jpeg 的配置
                            mozjpeg: {
                                // progressive: true,`
                                quality: 50
                            },
                            // // 使用 imagemin**-optipng 压缩 png，enable: false 为关闭
                            optipng: {
                                enabled: false,
                            },
                            // // 使用 imagemin-pngquant 压缩 png
                            // pngquant: {
                            //     quality: 70,
                            //     speed: 4
                            // },
                            // // 压缩 gif 的配置
                            // gifsicle: {
                            //     interlaced: false,
                            // },
                            // 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式
                            // webp: {
                            //     quality: 75
                            // }
                        }
                    }
                ]
            },
            //配置vue文件的支持
            {
                // 指定文件的格式
                test: /\.vue$/i,
                loader: "vue-loader"
            }
        ]
    },

    //插件信息
    plugins: [
        //清空打包模块的内容
        new CleanWebpackPlugin(),
        //生成html静态资源的内容
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            title: "测试内容",
            minify: {
                minifyCSS: true, // 是否压缩css
                collapseWhitespace: false, // 是否折叠空格
                removeComments: true // 是否移除注释
            }
        }),
        //生成静态的css文件
        new MiniCssExtractPlugin({
            filename: "css/app_[hash:8].css",
        }),

        //使用vue-loader插件
        new VueLoaderPlugin(),

        // //打包压缩
        // // new uglify()
        new TerserPlugin({
            // 压缩js
            test: /\.js(\?.*)?$/i, //匹配参与压缩的文件
            parallel: true, //使用多进程并发运行
            terserOptions: {
                compress: true,
                mangle: true,
            },
            extractComments: true, //将注释剥离到单独的文件中
        }),
        //css压缩
        new CssMinimizerPlugin({
            parallel: true,
            // 压缩js
            test: /\.css$/i, //匹配参与压缩的文件
        }),
       
        
    ],

    //开发模式
    mode: "development",
}